<template>
    <childLayout activeType="smsContent" :showSidebar="false" :showNav="false">
        <div class="child-content">
			
            <div class="content-title">{{contentInfo.cmsClassName}}</div>
			
            <div class="content-desc" v-html="contentInfo.cmsContent"></div>
        </div>
    </childLayout>
</template>

<script setup>
    import childLayout from "@/layout/childLayout";
    import { getCmsContent } from '@/api/common'

    const route = useRoute()

    watch(route, () => {
        getContent()
    })

    const contentInfo = ref({})

    const getContent = async () => {
        const result = await getCmsContent({
            title: route.query.title
        })
        contentInfo.value = result.data
    }

    onMounted(() => {
        getContent()
    })
</script>

<style lang="scss" scoped>
.child-content {
    margin-top: 54px;
}
.content-title {
    color: rgba(5, 11, 32, 1);
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    margin-bottom: 24px;
    text-align: center;
}

.content-desc {
    color: rgba(94, 94, 94, 1);
    font-size: 14px;
    font-weight: 400;
    line-height: 32px;
}
</style>